import React, { Component } from 'react';
import { Icon } from 'weaver-mobile';

export default class FieldItem extends Component {
  render() {
    let {itemKey,title,value,valueSpan,showIcon,iconType,iconFrom,iconClick,showBottom,isMobile,isMail,contentClick,isHref} = this.props;
    if(value == ""&&itemKey!=="address"){
        showIcon = false;
    }
    let content = (valueSpan && valueSpan != "") ? valueSpan : value;
    let hrefValue;
    let hrefValueSms = "";
    const isEm = window.em && window.em.checkJsApi('personCardSupport');
    if(isMobile && value != ""){
        // hrefValue = "tel:"+content;
        // hrefValueSms = "sms:"+content;
        // hrefValue = "javacript:void(0);";
        // hrefValueSms = "javacript:void(0);";
        if(isEm){
          content = <span className="crm_phone" onClick={()=>{this.emTel(value)}}>{content}</span>
        }else{
          content = <a href={`tel:${value}`}><span className="crm_phone">{content}</span></a>
        }        
    }else if(isMail && value != ""){
        // hrefValue = "mailto:"+content;
        // hrefValue = "javacript:void(0);";
        if(isEm){
          content = <span className="crm_phone" onClick={()=>{this.emMail(value)}}>{content}</span>
        }else{
          content = <a href={`mailto:${value}`}><span className="crm_phone">{content}</span></a>
        }        
    }
    let smsIcon = <span></span>;
    if(showIcon && isMobile && value!=""){
      if(isEm){
          smsIcon = <span className="crm_phone" onClick={()=>{this.emSMS(value,"")}}>{iconFrom ? <i className={"crm-card-operate-icon icon-crm "+iconType+""}/> : <Icon type={iconType}/>}</span>
      }else{
          smsIcon = <a href={`sms:${value}`}><span className="crm_phone">{iconFrom ? <i className={"crm-card-operate-icon icon-crm "+iconType+""}/> : <Icon type={iconType}/>}</span></a>
      }      
    }
    let contentClass = "crm-field-item-content";
    if(isHref){
      contentClass += " crm_phone";
    }
    return (
        <div>
            <div className="crm-field-item" onClick={()=>{
                if(iconType == "right"){
                    iconClick(itemKey,title,value,valueSpan);
                }
            }}>
                <div>
                    <div className="crm-field-item-title">{title}</div>
                    <div className={contentClass} onClick={()=>{
                        if(contentClick){
                          contentClick(itemKey,value,valueSpan);
                        }
                    }}>                
                    {content}
                    </div>
                </div>
                <div className="crm-field-item-operate">
                {
                    showIcon && !isMobile && (
                        iconFrom ? <i className={"crm-card-operate-icon icon-crm "+iconType+""} onClick={()=>{
                            if(iconClick){
                                iconClick(itemKey,title,value,valueSpan);
                            }
                        }}/> :
                        <Icon type={iconType} onClick={() =>{
                            if(iconClick){
                                iconClick(itemKey,title,value,valueSpan);
                            }
                        }}/>
                    )                 
                }

                {
                    smsIcon
                }
                </div>
            </div>
            {
                showBottom && (<div className="crm-field-item-bottom"></div>)
            }
        </div>
    );
  }

  emTel(mobile){
    // console.log("mobile",mobile);
    window.em.tel({'tel':mobile,'success':function (argument) {
        // console.log('success');
        // console.log(JSON.stringify(argument));
      },'fail':function (argument) {
        // console.log('fail')
        // console.log(argument);
      },'cancel':function (argument) {                        
        // console.log('cancel')
        // console.log(argument);
      },'complete':function (argument) {
        // console.log('complete')
        // console.log(argument);
    }});  
  }

  emSMS(mobile,smsContent){
    // console.log("mobile",mobile);
    window.em.textMessage({'mobile':mobile,'text':smsContent,'success':function (argument) {
        // console.log('success');
        // console.log(JSON.stringify(argument));
      },'fail':function (argument) {
        // console.log('fail')
        // console.log(argument);
      },'cancel':function (argument) {                        
        // console.log('cancel')
        // console.log(argument);
      },'complete':function (argument) {
        // console.log('complete')
        // console.log(argument);
    }}); 
  }
  
  emMail(mailAddress){
    // console.log("mailAddress",mailAddress);
    window.em.mailto({'mail':mailAddress,'success':function (argument) {
        // console.log('success');
        // console.log(JSON.stringify(argument));
      },'fail':function (argument) {                        
        // console.log('fail');
        // console.log(argument);
      },'cancel':function (argument) {
        // console.log('cancel');
        // console.log(argument);
      },'complete':function (argument) {
        // console.log('complete');
        // console.log(argument);
    }}); 
  }
}